<template>
  <div class="chart">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="info">
          <UserInfo :userImg="userImg" />
        </div>
        <div class="table">
          <Table :tableData="tableData" :tableLabel="tableLabel" />
        </div>
      </el-col>
      <el-col :span="16">
        <div class="rightTop">
          <Pay />
        </div>
        <div class="rightCenter">
          <el-card>
            <Echart style="height:280px;" :chartData="echartData.order" />
          </el-card>
        </div>
        <div class="rightBottom">
          <el-card>
            <Echart style="height:260px;" :chartData="echartData.user" />
          </el-card>
          <el-card>
            <Echart style="height:260px;" :isAxisChart="false" :chartData="echartData.video" />
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import UserInfo from "./sub/info"
import Table from "./sub/table"
import Pay from "./sub/pay"
import Echart from "../../components/Echart"
import { reqTableData } from "../../api"
export default {
  name: "chart",
  data () {
    return {
      userImg: require("../../assets/logo.png"),
      tableData: [], // 表格数据
      tableLabel: {
        name: "课程",
        todayBuy: "今日购买",
        monthBuy: "本月购买",
        totalBuy: "总购买",
      },
      echartData: {
        order: {
          xData: [],
          series: [],
        },
        user: {
          xData: [],
          series: [],
        },
        video: {
          xData: [],
          series: [],
        },
      },
    }
  },
  methods: {
    async getTableData () {
      const res = await reqTableData()
      if (res.code === 20000) {
        this.tableData = res.data.tableData
        // console.log(res.data)
        // 折线图数据
        this.echartData.order.xData = res.data.orderData.date
        const lineArr = Object.keys(res.data.orderData.data[0])

        lineArr.forEach((key) => {
          const dataObj = {
            name: key === "wechat" ? "小程序" : key,
            type: "line",
            data: res.data.orderData.data.map((item) => item[key]),
          }

          this.echartData.order.series.push(dataObj)
        })

        // 柱状图数据
        let newArr = []
        let activeArr = []
        res.data.userData.map((item) => {
          this.echartData.user.xData.push(item.date)
          newArr.push(item.new)
          activeArr.push(item.active)
        })
        this.echartData.user.series.push(
          {
            name: "新增用户",
            type: "bar",
            data: newArr,
          },
          {
            name: "活跃用户",
            type: "bar",
            data: activeArr,
          }
        )

        // 饼图数据
        this.echartData.video.series.push({
          data: res.data.videoData,
          type: "pie",
        })
      }
    },
  },
  created () {
    this.getTableData()
  },
  components: {
    Table,
    UserInfo,
    Pay,
    Echart,
  },
}
</script>
<style lang="less" scoped>
.chart {
  .table {
    margin-top: 20px;
  }

  .rightBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .el-card {
      width: 49%;
    }
  }
}
</style>
